<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户登录</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <meta name="Keywords" content="Sunny">
  <meta name="Description" content="Sunny">
  <link rel="stylesheet" href="/static/css/base.css">
  <link rel="stylesheet" href="/static/css/iconfont.css">
  <link rel="stylesheet" href="/static/css/reg.css">
  <style>
    .login-message {
      display: block;
      line-height: 30px;
      font-size: 14px;
      color: red;
      text-align: left;
      width: 340px;
      margin: 0 auto;
    }
    .message-error {
      color: #ea5d5f;
      font-size: 12px;
      left: 0;
    }
  </style>

  <script type="text/javascript">

      function changeCaptcha() {
          let captchaImg = document.getElementById('captchaImg');
          captchaImg.src = "/public/captcha.jpg?t=" + new Date().getTime();
      }

  </script>
</head>
<body>
<div id="ajax-hook"></div>
<div class="wrap">
  <div class="wpn">
    <div class="form-data pos">
      <a href=""><img src="/static/img/logo.png" class="head-logo"></a>
      <div class="change-login">
        <p name="account" th:class="${type} == 'account' ? 'account_number on' : 'account_number'">账号登录</p>
        <p name="mobile" th:class="${type} == 'mobile' ? 'message on' : 'message'">短信登录</p>
      </div>
      <div class="login-message">
        <span class="message-error" th:text="${errorMsg}"></span>
      </div>
      <div th:class="${type} == 'account' ? 'form1' : 'form1 hide'">
        <form id="accountLogin" action="/login" method="post">
          <p class="p-input pos">
            <input type="text" id="num" name="username" th:value="${username}" placeholder="请输入用户名/手机号" maxlength="30">
            <span class="tel-warn num-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
          </p>
          <p class="p-input pos">
            <input type="password" id="pass" name="password" maxlength="30" placeholder="请输入密码">
            <span class="tel-warn pass-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
          </p>
          <p th:class="${enableCaptcha} ? 'p-input pos code' : 'p-input pos code hide'" >
            <input type="text" id="veri" name="captcha" maxlength="6" placeholder="请输入验证码">
            <img id="captchaImg" onclick="changeCaptcha()" title="点击刷新验证码" src="/public/captcha.jpg" />
            <span class="tel-warn img-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
          </p>
        </form>
      </div>
      <div th:class="${type} == 'mobile' ? 'form2' : 'form2 hide'">
        <form id="smsLogin" action="/authentication/mobile" method="post">
          <p class="p-input pos">
            <input type="number" id="num2" name="mobile" maxlength="11" th:value="${username}" placeholder="手机号">
            <span class="tel-warn num2-err hide"><em>账号或密码错误</em><i class="icon-warn"></i></span>
          </p>
          <p class="p-input pos">
            <input type="number" id="veri-code" name="captcha" maxlength="6" placeholder="输入验证码" />
            <input type="hidden" id="smsCaptchaKey" name="captchaKey">
            <a href="javascript:void(0);" class="send">发送验证码</a>
            <span class="time hide"><em>60</em>s</span>
            <span class="tel-warn error hide">验证码错误</span>
          </p>
        </form>
      </div>
      <div class="r-forget cl">
        <a href="/register.html" class="z">账号注册</a>
        <a href="/getpass.html" class="y">忘记密码</a>
      </div>
      <button class="lang-btn off log-btn">登录</button>
      <div class="third-party">
        <a href="/openid/qq" class="log-qq icon-qq-round"></a>
        <a href="/openid/wechat" class="log-qq icon-weixin"></a>
        <a href="#" class="log-qq icon-sina1"></a>
      </div>
      <p class="right">Powered by lyyzoo © 2018</p>
    </div>
  </div>
</div>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/agree.js"></script>
<script src="/static/js/login.js"></script>
</body>
</html>